<template>
    <!-- 我的套餐 -->
    <el-dialog title="我的套餐" :visible.sync="dialogTableVisible100" :show-close="true" :center="true" top="20vh" :before-close="beforeClose">
        <div class="dialogVue">
            <div class="inpVue">
                <div class="label">当前套餐：</div>
                <el-input v-model="accountInfo.levelStr" style="margin-top: 15px;" readonly></el-input>
            </div>
            <div class="inpVue margin30">
                <div class="label">剩余微信(个)：</div>
                <el-input v-model="accountInfo.wechatNum" style="margin-top: 15px;" readonly></el-input>
            </div>
            <div class="inpVue margin30">
                <div class="label">剩余token数(个)</div>
                <el-input v-model="accountInfo.tokenNum" style="margin-top: 15px;" readonly></el-input>
            </div>
            <div class="btn margin30" @click="update">升级套餐</div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: {
        dialogTableVisible100: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            accountInfo: {}
        }
    },
    async created(){
        await this.init()
    },
    methods: {
        beforeClose(){
            this.$emit("beforeClose")
        },
        async init(){
            let res = await this.$post("/front/child/userPackageInfo")
            if(res.data.code===0) {
                console.log(res)
                this.accountInfo = res.data.obj
            }
        },
        update(){
            this.$emit("beforeClose", "update")
        },
    }
}
</script>


<style lang="less" scoped>
:deep(.el-dialog) {
    width: 400px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px;
}
:deep(.el-dialog__body) {
    padding: 0 30px 30px;
}
.dialogVue {
    width: 100%;
    .inpVue {
        width: 100%;
        .label {
            width: 100px;
            color: #666;
            font-weight: 600;
            font-size: 12px;
        }
        .sendCode {
            color: #0147fd;
            cursor: pointer;
            padding-left: 20px;
        }
    }
    .btn {
        width: 100%;
        height: 42px;
        border-radius: 4px;
        line-height: 42px;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
        color: #fff;
    }
}
</style>